<template>
	<view>
		<scroll-view class="scroll-view_H" :scroll-x="true">
			<view class="scroll-view-item_H" v-for="(item,index) in service.data" :key="index">
				<view class="category" @click="tabClick(index)" :style="{background:item.color}">
					<u-image :src="item.image" width="110rpx" height="110rpx" shape="circle" style="margin-top: 15rpx;"></u-image>
					<text class="categorytitle">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			service: {
				type: Object,
				default: null
			},
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {}
		},
		// watch:{
		// 	service(val) {
		// 		if(!val.isLoading){
		// 			val.tabClick(val.data[this.value])
		// 		}
		// 	},
		// },
		methods: {
			// tabClick(tab, i) {
			// 	if (this.value != i) {
			// 		this.$emit("input", i);
			// 		this.$emit("change", i);
			// 	}
			// },
			tabClick(index){
				this.$u.throttle(res=>{
					this.service.itemClick(index)
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		.scroll-view-item_H {
			display: inline-block;
			margin-right: 24rpx;

			.category {
				background: #FFFFFF;
				width: 140rpx;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 70rpx;
				align-items: center;
			}
			.categorytitle{
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				position: relative;
				z-index: 10;
				margin-bottom: 38rpx;
			}
		}
	}
</style>
